<template>
  <div class="custom-page">
    <Page
      class="pull-right"
      :size="size"
      :page-size="pageSize"
      :page-size-opts="pageSizeOpts"
      :show-total="true"
      :show-elevator="showElevator"
      :show-sizer="showSizer"
      :current="current"
      :total="total"
      @on-change="pageChange"
      @on-page-size-change="pageSizeChange" />
  </div>
</template>

<script>
export default {
  emits: ['on-change', 'on-page-size-change'],
  props: {
    current: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    size: {
      type: String,
      default: ''
    },
    pageSize: {
      type: [String, Number],
      default: 10
    },
    pageSizeOpts: {
      type: Array,
      default: () => [10, 20, 50, 100, 150]
    },
    showSizer: {
      type: Boolean,
      default: false
    },
    showElevator: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    pageChange (page) {
      this.$emit('on-change', page)
    },
    pageSizeChange (pageSize) {
      this.$emit('on-page-size-change', pageSize)
    }
  }
}
</script>

<style lang="scss">
  @import 'common/scss/color';

  .custom-page {
    width: 100%;
    height: 35px;
    position: relative;
    // overflow: hidden;
    .ivu-page-item,
    .ivu-page-prev,
    .ivu-page-next {
      border: 1px solid #F2F2F2 !important;
      border-radius: 0 !important;
      &:not(.ivu-page-disabled) {
        &:hover {
          border: 1px solid $Color-primary !important;
          a {
            color: $Color-primary;
          }
        }
      }
    }
    .ivu-page-item {
      &.ivu-page-item-active {
        border: 1px solid $Color-primary !important;
        a {
          color: $Color-primary;
        }
      }
    }
  }
</style>
